<template>
    <el-dialog v-model="openComplete" title="填写健康随访信息" width="450" :before-close="handleClose">
        <el-form ref="ruleServiceRef" :rules="serviceDataRules" label-width="80px" :inline="true" :model="formData"
            class="demo-form-inline" style="--el-font-size-base:13px;">

            <el-form-item label="血压" prop="bloodPressure">
                <el-input v-model="formData.bloodPressure" placeholder="请输入">
                    <span style="font-size: 13px;color: #999;margin-left: 10px;">mmHg</span>
                </el-input>
            </el-form-item>
            <el-form-item label="空腹血糖" prop="bloodSugar">
                <el-input v-model="formData.bloodSugar" placeholder="请输入">
                    <span style="font-size: 13px;color: #999;margin-left: 10px;">mmHg</span>
                </el-input>
            </el-form-item>
            <el-form-item label="心率" prop="heartRate">
                <el-input v-model="formData.heartRate" placeholder="请输入">
                    <span style="font-size: 13px;color: #999;margin-left: 10px;">mmHg</span>
                </el-input>
            </el-form-item>
            <el-form-item label="病情描述" prop="description" style="height: 120px;display: flex;">
                <el-input v-model="formData.description" style="width: 332px;height: 110px;" :rows="5" type="textarea"
                    placeholder="请输入" />
            </el-form-item>
            <el-form-item label="健康指导" prop="guidance" style="height: 120px;display: flex;">
                <el-input v-model="formData.guidance" style="width: 332px;height: 110px;" :rows="5" type="textarea"
                    placeholder="请输入" />
            </el-form-item>

        </el-form>

        <template #footer>
            <div class="dialog-footer">
                <el-button @click="openComplete = false">取消</el-button>
                <el-button type="primary" @click="toUpdate(ruleServiceRef)">
                    确认
                </el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup>
import { ref } from 'vue';
import { CompleteServiceApi } from '../../../api/service';
const openComplete = ref(false);
const formData = ref({})
const prop = defineProps(['serviceId'])
const emit = defineEmits(['getService', 'getFullService'])
// 打开弹窗
function open() {
    openComplete.value = true
}

defineExpose({
    open
})

// 完成
function completeService() {
    CompleteServiceApi({ ...formData.value, serviceId: prop.serviceId })
        .then(res => {
            if (res.code == 200) {
                emit('getFullService')
                emit('getService')
                ElMessage({
                    message: '服务已完成',
                    type: 'success',
                })
            } else {
                ElMessage.error('请重试')
            }
        })
}

// 确认
const toUpdate = (formEl) => {


    if (!formEl) return
    formEl.validate((valid, fields) => {
        if (valid) {
            openComplete.value = false
            completeService()

            if (!formData.value._id) {

            } else {

            }
        } else {
            console.log('error submit!', fields)
        }
    })
}


// 表单验证
const serviceDataRules = ref({
    bloodPressure: [
        {
            required: true,
            message: '血压不能为空',
            trigger: 'blur',
        },
    ],
    bloodSugar: [
        {
            required: true,
            message: '学糖不能为空',
            trigger: 'blur',
        },
    ],
    heartRate: [
        {
            required: true,
            message: '心率不能为空',
            trigger: 'blur',
        },
    ],

    description: [
        {
            required: true,
            message: '病情描述不能为空',
            trigger: 'blur',
        },
    ],
    guidance: [
        {
            required: true,
            message: '健康指导不能为空',
            trigger: 'change',
        },
    ],

})
const ruleServiceRef = ref()
</script>

<style scoped>
.el-input {
    height: 40rpx;
    width: 200rpx;
}

.el-form-item {
    margin-bottom: 20px;
}
</style>